<style lang="stylus" scoped>

</style>

<template>
  <div class="row q-col-gutter-xs items-center q-pa-xs">
    <q-select class="col-4" outlined emit-value map-options v-model="sentForm.userType" :options="userTypeOpts" label="用户" dense options-dense />
    <q-select class="col-4" outlined emit-value map-options v-model="sentForm.type" :options="typeOpts" label="类型" dense options-dense filter />
    <q-select class="col-4" outlined emit-value map-options v-model="sentForm.priority" :options="levelOpts" label="优先级" dense options-dense filter />
    <q-select class="col-4" outlined emit-value map-options v-model="sentForm.importance" :options="levelOpts" label="重要性" dense options-dense filter />
    <q-select class="col-8" outlined emit-value map-options v-model="sentForm.viewCode" :options="viewCodeOpts" label="菜单" dense options-dense filter />
    <q-input class="col-12" outlined v-model="sentForm.content" type="textarea" :rows="3" />
    <div class="col-12">
      <q-btn color="light-blue" class="full-width" @click="sent">提交</q-btn>
      <q-btn color="light-blue" outline class="full-width q-mt-sm" @click="$router.push({path: '/about'})">列表视图</q-btn>
    </div>
  </div>
</template>

<script>
import { wpLeftNav, ppLeftNav } from 'src/plugins/leftNav'
export default {
  data () {
    return {
      flag: false,
      sentForm: {
        userType: 1,
        viewCode: '',
        type: '',
        priority: '',
        importance: '',
        state: 0,
        content: ''
      },
      userTypeOpts: [
        {
          label: '胡世洋',
          value: 1
        },
        {
          label: '尤敏明',
          value: 2
        },
        {
          label: '郭战旗',
          value: 3
        },
        {
          label: '谌啸林',
          value: 4
        },
        {
          label: '刘虎木',
          value: 5
        },
        {
          label: '胡扬东',
          value: 6
        }
      ],
      typeOpts: [
        {
          label: '问题',
          value: 1
        },
        {
          label: '沟通',
          value: 2
        },
        {
          label: '优化',
          value: 3
        }
      ],
      levelOpts: [
        {
          label: '高',
          value: 1
        },
        {
          label: '中',
          value: 2
        },
        {
          label: '低',
          value: 3
        }
      ],
      stateOpts: [
        {
          label: '未读',
          value: 0
        },
        {
          label: '已读',
          value: 1
        },
        {
          label: '处理中',
          value: 2
        },
        {
          label: '关闭',
          value: 3
        }
      ],
      viewCodeOpts: []
    }
  },
  mounted () {
    this.menuHandler(wpLeftNav, '业务')
    this.menuHandler(ppLeftNav, '系统')
  },
  watch: {
    '$route' (route) {
      this.getMenuCode(wpLeftNav)
      this.getMenuCode(ppLeftNav)
    }
  },
  methods: {
    sent () {
      this.viewCodeOpts.map(opt => {
        if (this.sentForm.viewCode === opt.value) {
          this.sentForm.viewName = opt.label
        }
      })
      this.$api({
        method: 'put',
        url: '/mdm/systeminfo/add',
        params: this.sentForm,
        emulateJSON: true,
        useNotify: true,
        successCallback: ({ success }) => {
          this.flag = !this.flag
          this.$emit('change', this.flag)
          if (success) {
            this.sentForm = {
              userType: 1,
              viewCode: '',
              type: '',
              priority: '',
              importance: '',
              state: 0,
              content: ''
            }
            this.getMenuCode(wpLeftNav)
            this.getMenuCode(ppLeftNav)
          }
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    },
    menuHandler (menuList, header) {
      menuList.forEach(menu => {
        if (menu.children) {
          this.menuHandler(menu.children, header + ' -> ' + menu.title)
        } else {
          let obj = {
            // label: header + ' -> ' + menu.title,
            label: menu.title,
            value: menu.codeForChat
          }
          this.viewCodeOpts.push(obj)
        }
      })
    },
    getMenuCode (list) {
      for (let index = 0; index < list.length; index++) {
        const menu = list[index]
        if (menu.children) {
          this.getMenuCode(menu.children)
        } else {
          if (menu.fullPath === this.$route.meta.fullPath) {
            this.sentForm.viewCode = menu.codeForChat
            break
          }
          continue
        }
      }
    }
  }
}
</script>
